<template>
  <div class="citylist" ref="wrapper">
    <div>
      <div class="citylist-cont">
        <div class="self">当前城市</div>
        <div class="button-wrapper">
          <div class="list-button">
            <div class="list-button-item">{{ this.city }}</div>
          </div>
        </div>
      </div>
      <div class="citylist-cont">
        <div class="self">推荐城市</div>
        <div class="button-wrapper">
          <div
            class="list-button"
            v-for="item in hotCitys"
            :key="item.id"
          >
            <div class="list-button-item" @click="handelChangeCity(item.name)">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="citylist-cont">
        <div class="list-wrapper" v-for="(item, key) in citys" :key="key" :ref="key">
          <div class="self">{{ key }}</div>
          <div
            class="citylist-list"
            v-for="innerItem in item"
            :key="innerItem.id"
            @click="handelChangeCity(innerItem.name)"
          >{{ innerItem.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'CityList',
  props: {
    citys: Object,
    hotCitys: Array,
    letter: String
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  },
  watch: {
    letter () {
      this.scroll.scrollToElement(this.$refs[this.letter][0])
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    handelChangeCity (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity']) // 将store方法映射到该组件上
  }
}
</script>

<style lang="stylus" scoped>
  .citylist
    position: absolute
    top: 1.7rem
    left: 0
    bottom: 0
    right: 0
    overflow: hidden
    .citylist-cont
      .self
        padding: .1rem .2rem
        background-color: #f5f5f5
      .button-wrapper
        padding: .2rem .2em 0 .2rem
        overflow: hidden
        .list-button
          width: 33.33%
          float: left
          margin-bottom: .2rem
          .list-button-item
            width: 85%
            text-align: center
            padding: .1rem 0
            border: 1px solid #ddd
            border-radius: .06rem
      .citylist-list
        padding: .2rem
        border-bottom: .02rem solid #ddd
        &:last-child
          border-bottom: 0
</style>
